<script setup lang='ts'>
  import { onMounted, reactive, ref } from 'vue';
  import { auditApi } from '@/api/controller';
  import { getPlayEndTime, getDateArray } from '@/utils'
  import { ToastSuccess, Toastloading } from '@/utils/public';
  import xmDatePicker from '@/components/xmDatePicker/index.vue';
  import Pagination from "@/components/Pagination/index.vue";
  import { ElMessageBox } from 'element-plus';
  import trendsInfo from './trendsInfo.vue';
  const trendsInfoRef = ref();
  const action = reactive({
    total:0,
    Auditstate:-1,
    list:[] as any[],
    timeObj:getPlayEndTime(getDateArray('ymdhis'))
  })
  const initialQuery = {
    page: 1,
    limit: 20,
    uuid: '',
    status: -1,
    type: -1,
    c_type: -1,
    sort: "+id",
    state: 1,
  }
  const listQuery = reactive({...initialQuery})
  let audit_total = 0; // 待审核条数
  let trendsIndex = -1; // 当前打开的动态内容下标
  // 审核进度
  const auditCountArr = ["未审核", "初审结束", "复审结束"]
  // 审核状态
  const auditStatusArr = ["驳回", "通过", "", "未审核"]
  /**
   * 审核动态
   * @param scoped row $index
   */
  const openTrendsInfo = (scoped:any = {})=>{
    const { row={}, $index } = scoped
    trendsIndex = $index
    trendsInfoRef.value.openDialog({
      index:$index,
      listLengthNum:action.list.length,
      auditCountArr,
      auditStatusArr,
      audit_total,
      ...row
    })
  }
  const getAuditState = async()=>{
    const res = await auditApi.getAuditState()
    const { status = 0 } = res?.data?.data || { status:0 }
    action.Auditstate = status
  }
  const handleTrendsState = ()=>{
    ElMessageBox.confirm(`确定${ action.Auditstate?'关闭动态审核':'开启动态审核' }吗?`, "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
    .then(async () => {
      const loading = Toastloading()
      await auditApi.setAuditState({ state: action.Auditstate==0?1:0 })
      getAuditState()
      ToastSuccess('操作成功')
      loading.close()
    })
    .catch(() => {});
  }
  const resetQuery = ()=>{
    action.timeObj = getPlayEndTime(getDateArray('ymdhis'))
    Object.assign(listQuery,{
      ...initialQuery
    })
    getList()
  }
  const handleSerach = ()=>{
    listQuery.page = 1
    getList()
  }
  const trendsclose = (type:string ='',nextIndex:number=0)=>{
    if(type == 'update') getList()
    if(type == 'next') {
      openTrendsInfo({
        row:action.list[nextIndex],
        $index:nextIndex
      })
      return
    }
    trendsIndex = -1
  }
  const getList = async()=> {
    const loading = Toastloading()
    const { playTime, endTime } = action.timeObj
    const res = await auditApi.getTrends({
      ...listQuery,
      end_date:[playTime,endTime]
    })
    loading.close()
    const { list={data:[],total:0, wait_audit_total:0}, wait_audit_total } = res.data
    const { data=[], total=0 } = list || {data:[],total:0, wait_audit_total:0}
    audit_total = wait_audit_total
    action.list = data
    action.total = total
    // 已打开审核弹窗 更新弹窗内容
    if(trendsIndex > -1) {
      openTrendsInfo({
        row:data[trendsIndex],
        $index:trendsIndex
      })
    }
  }
  onMounted(()=>{
    getAuditState()
    getList()
  })
</script>

<template>
  <div class="xm-content">
    <div class="xm-headTab">
      <div class="labelBox">
        <div class="labelItem">
          <div class="label">用户UUID：</div>
          <el-input v-model="listQuery.uuid"  placeholder="用户UUID" />
        </div>
        <div class="labelItem">
          <div class="label">审核状态：</div>
          <el-select  v-model="listQuery.status" placeholder="请选择审核状态" >
            <el-option label="全部" :value="-1" />
            <el-option label="待审核" :value="0" />
            <el-option label="初审" :value="1" />
            <el-option label="复审" :value="2" />
          </el-select>
        </div>
        <!-- <div class="labelItem">
          <div class="label">审核类型：</div>
          <el-select  v-model="listQuery.type" placeholder="请选择审核类型" >
            <el-option label="全部" :value="-1" />
            <el-option label="普通" :value="0" />
            <el-option label="精选" :value="1" />
            <el-option label="推荐" :value="2" />
          </el-select>
        </div> -->
        <xmDatePicker v-model:timeval="action.timeObj" />
      </div>
      <div class="labelBox">
        <el-button type="primary" @click="handleSerach">查询</el-button>
        <el-button type="primary" @click="resetQuery">重置</el-button>
        <el-button
          v-if="action.Auditstate != -1"
          v-rule="'trends_switchstate'"
          :type="action.Auditstate?'danger':'success'"
          @click="handleTrendsState"
        >
          {{ action.Auditstate?'关闭动态审核':'开启动态审核' }}
        </el-button>
      </div>
    </div>
    <el-table
      class="xm-main xm-TableCenter"
      :data="action.list"
      border>
      <el-table-column width="80" prop="content_id" label="ID" />
      <el-table-column width="120" prop="user.uuid" label="用户UUID" />
      <el-table-column min-width="180" show-overflow-tooltip prop="user.nickname" label="用户昵称" />
      <el-table-column width="120" sortable prop="trends_zpzy_count.read_count" label="阅读数" />
      <el-table-column width="120" sortable prop="trends_zpzy_count.like_count" label="点赞数" />
      <el-table-column width="120" sortable prop="trends_zpzy_count.comment_count" label="评论数" />
      <el-table-column width="120" prop="audit_count" label="审核进度">
        <template #default="scoped">
          <el-tag
            :type="scoped.row.audit_count == 2?'success':''"
          >
            {{ auditCountArr[scoped.row.audit_count] }}
          </el-tag>
        </template>
      </el-table-column> 
      <el-table-column width="120" label="审核状态">
        <template #default="scoped">
          <el-tag
            :type="['danger','success','',''][scoped.row.audit_status]"
          >
          {{ auditStatusArr[scoped.row.audit_status] }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column width="180" label="初审人员">
        <template #default="scoped">
          <el-tag>{{ scoped.row.first_name }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column width="200" prop="first_time" label="初审时间" />
      <el-table-column width="180" label="复审人员">
        <template #default="scoped">
          <el-tag>{{ scoped.row.second_name }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column width="200" prop="second_time" label="复审时间" />
      <el-table-column width="200" prop="create_timestamp" label="创建时间" />
      <el-table-column fixed="right" width="120" label="操作">
        <template #default="scoped">
          <el-button type="primary" @click="openTrendsInfo(scoped)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-show="action.total > 0" :total="action.total" v-model:page="listQuery.page"
      v-model:limit="listQuery.limit" @pagination="getList" />
    <trendsInfo ref="trendsInfoRef" @update-list="getList" @closeChange="trendsclose" />
  </div>
</template>